<script setup lang="js">
import * as echarts from 'echarts'
import { ref, onMounted, onUnmounted, watch, reactive } from 'vue'
import anlyze from "../../apis/anlyze.js"
import { useI18n } from 'vue-i18n'

// 1. 核心依赖与状态管理
const { t, locale } = useI18n()
const chartRef = ref(null)
let myChart = null
// 新增：保存当前查看的月份（解决月视图返回年视图后状态丢失问题）
const state = reactive({
  currentLevel: 'year',
  currentMonth: null // 存储当前查看的月份（如：1-12）
})

// 2. 工具函数（去重整合，修复重复定义问题）
// 动态计算 Y 轴配置（单位25，保留原逻辑）
const calcYAxis = (maxValue) => {
  const step = 25
  let max = Math.ceil(maxValue / step) * step
  if (max < step * 4) max = step * 4
  return { max, splitNumber: max / step }
}

// 月份映射（支持中英文，适配国际化）
const monthMap = {
  '一月': 1, 'January': 1,
  '二月': 2, 'February': 2,
  '三月': 3, 'March': 3,
  '四月': 4, 'April': 4,
  '五月': 5, 'May': 5,
  '六月': 6, 'June': 6,
  '七月': 7, 'July': 7,
  '八月': 8, 'August': 8,
  '九月': 9, 'September': 9,
  '十月': 10, 'October': 10,
  '十一月': 11, 'November': 11,
  '十二月': 12, 'December': 12
}

// 解析月份标签为数字（通用命名，适配多语言）
const extractMonthNumberFromLabel = (monthLabel) => {
  return monthMap[monthLabel] || NaN
}

// 3. ECharts 基础配置（融合双方优势：保留精细样式+国际化文案）
const getBaseOption = () => ({
  title: {
    text: t('volunteerRegistrationData'), // 国际化标题
    left: 'center',
    top: 30,
    textStyle: {
      color: '#333',
      fontSize: 18,
      fontWeight: 'bold'
    }
  },
  backgroundColor: 'transparent',
  textStyle: {
    fontFamily: 'PingFang SC, Microsoft YaHei, sans-serif'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '15%', // 初始底部间距，响应式时动态调整
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      shadowStyle: { color: 'rgba(150, 150, 150, 0.1)' }
    },
    backgroundColor: 'rgba(255,255,255,0.95)',
    borderWidth: 0,
    padding: [8, 12],
    textStyle: { color: '#333', fontSize: 12 },
    extraCssText: 'box-shadow: 0 2px 8px rgba(0,0,0,0.1);'
  },
  legend: {
    textStyle: { color: '#666' },
    itemHeight: 12,
    itemWidth: 12,
    itemGap: 16,
    top: 10, // 固定图例位置，避免重叠（来自第二个组件）
    data: []
  },
  xAxis: {
    type: 'category',
    axisLine: { lineStyle: { color: '#646161' } },
    axisLabel: {
      color: '#5b4f4f',
      rotate: 45, // 初始旋转角度，响应式时动态调整
      margin: 15,
      align: 'right',
      verticalAlign: 'middle',
      interval: 0,
      fontSize: 12 // 初始字体大小，响应式时动态调整
    },
    data: []
  },
  yAxis: {
    type: 'value',
    axisLine: { show: false },
    axisTick: { show: false },
    splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } },
    axisLabel: { color: '#666' },
    name: t('volunteerCount'), // 国际化 Y 轴名称（来自第二个组件）
    nameTextStyle: { color: '#666', fontSize: 12 }
  },
  series: [],
  // 统一动画配置（来自第一个组件，提升切换流畅度）
  animationDurationUpdate: 300,
  animationEasing: 'elasticOut',
  animationDelayUpdate: (idx) => idx * 5,
  graphic: [] // 用于月视图的“返回”文本
})

// 4. 生命周期与事件管理（规范销毁逻辑，避免内存泄漏）
onMounted(() => {
  if (chartRef.value) {
    myChart = echarts.init(chartRef.value)
    loadYearData()
    // 绑定事件
    myChart.on('click', handleClick)
    window.addEventListener('resize', handleResize)
  }
})

onUnmounted(() => {
  // 彻底移除事件监听与销毁图表（来自第二个组件）
  if (myChart) {
    myChart.off('click', handleClick)
    myChart.dispose()
    myChart = null
  }
  window.removeEventListener('resize', handleResize)
})

// 监听语言变化（来自第二个组件，支持实时切换）
watch(locale, () => {
  if (state.currentLevel === 'year') {
    loadYearData()
  } else if (state.currentMonth) {
    // 记忆当前月份，语言切换后仍显示原月视图（优化体验）
    loadMonthData(state.currentMonth)
  }
})

// 5. 响应式处理（保留第一个组件的精细调整逻辑）
const handleResize = () => {
  if (!myChart) return

  const width = chartRef.value.offsetWidth
  const option = myChart.getOption()
  const isSmallScreen = width < 768

  // 动态调整 X 轴标签（小屏幕优化）
  option.xAxis[0].axisLabel.rotate = isSmallScreen ? 30 : 45
  option.xAxis[0].axisLabel.fontSize = isSmallScreen ? 10 : 12
  // 动态调整网格底部间距（避免标签被截断）
  option.grid.bottom = isSmallScreen ? '20%' : '15%'

  myChart.setOption(option)
  myChart.resize()
}

// 6. 数据加载逻辑（融合年视图堆叠+月视图按日粒度）
/**
 * 年视图：堆叠图（本月注册 + 累计注册）
 * 保留第一个组件的堆叠样式，使用第二个组件的国际化文案
 */
const loadYearData = async () => {
  try {
    const res = await anlyze.getVolunteersCountByMonth()
    const parsed = JSON.parse(res)
    const { xAxis: parsedXAxis, seriesData: parsedSeries } = parsed

    // 处理系列数据：堆叠配置 + 渐变样式
    const seriesData = parsedSeries.map((series, index) => ({
      name: index === 0 ? t('monthlyRegistered') : t('cumulativeRegistered'),
      type: 'bar',
      stack: t('total'), // 国际化堆叠名称
      barWidth: '60%',
      data: series.data,
      itemStyle: {
        color: index === 0
            ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#5B8FF9' },
              { offset: 1, color: '#3A6FD9' }
            ])
            : '#E8EDF3',
        borderRadius: [4, 4, 0, 0]
      },
      emphasis: {
        itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.3)' }
      }
    }))

    // 计算 Y 轴配置（取累计注册的最大值）
    const maxValue = Math.max(...seriesData[1].data)
    const yAxisCfg = calcYAxis(maxValue)

    // 更新状态
    state.currentLevel = 'year'
    state.currentMonth = null

    // 设置图表配置
    myChart.setOption({
      ...getBaseOption(),
      legend: { ...getBaseOption().legend, data: [t('monthlyRegistered'), t('cumulativeRegistered')] },
      xAxis: { ...getBaseOption().xAxis, data: parsedXAxis },
      yAxis: { ...getBaseOption().yAxis, max: yAxisCfg.max, splitNumber: yAxisCfg.splitNumber },
      series: seriesData
    }, true)
  } catch (error) {
    console.error(t('yearDataLoadFailed'), error)
  }
}

/**
 * 月视图：按日显示注册人数（使用第二个组件的按日粒度，保留第一个组件的样式）
 * @param {number} monthNumber - 月份（1-12）
 */
const loadMonthData = async (monthNumber) => {
  if (isNaN(monthNumber) || monthNumber < 1 || monthNumber > 12) {
    console.warn(t('invalidMonthParameter'), monthNumber)
    return
  }

  try {
    // 调用按日接口（来自第二个组件，粒度更精细）
    const res = await anlyze.getVolunteersCountByDay(monthNumber)
    const parsed = JSON.parse(res)
    const { xAxis: parsedXAxis, seriesData: parsedSeries } = parsed

    // 处理系列数据：单系列 + 渐变样式
    const seriesData = parsedSeries.map(series => ({
      name: t('dailyRegistered'),
      type: 'bar',
      barWidth: '40%', // 月视图柱子更窄，避免拥挤
      data: series.data,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#0b95d6' },
          { offset: 1, color: '#5B86E5' }
        ]),
        borderRadius: [4, 4, 0, 0]
      },
      emphasis: {
        itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.3)' }
      }
    }))

    // 计算 Y 轴配置（取每日注册的最大值）
    const maxValue = Math.max(...seriesData[0].data)
    const yAxisCfg = calcYAxis(maxValue)

    // 更新状态（保存当前月份）
    state.currentLevel = 'month'
    state.currentMonth = monthNumber

    // 设置图表配置：添加“返回年度视图”文本
    myChart.setOption({
      ...getBaseOption(),
      legend: { ...getBaseOption().legend, data: [t('dailyRegistered')] },
      xAxis: { ...getBaseOption().xAxis, data: parsedXAxis },
      yAxis: { ...getBaseOption().yAxis, max: yAxisCfg.max, splitNumber: yAxisCfg.splitNumber },
      series: seriesData,
      graphic: [{
        type: 'text',
        left: 20,
        top: 10,
        style: {
          text: `${t('backToYearView')} ←`, // 国际化返回文案
          fontSize: 14,
          fontWeight: 'bold',
          fill: '#5B8FF9',
          cursor: 'pointer'
        },
        onclick: loadYearData // 点击返回年视图
      }]
    }, true)
  } catch (error) {
    console.error(t('monthDataLoadFailed'), error)
  }
}

// 7. 点击事件处理（适配多语言月份解析，保留状态记忆）
const handleClick = (event) => {
  if (state.currentLevel === 'year' && event.name) {
    const monthNumber = extractMonthNumberFromLabel(event.name)
    if (!isNaN(monthNumber)) {
      loadMonthData(monthNumber)
    } else {
      console.warn(t('cannotParseMonth'), event.name)
    }
  }
}
</script>

<template>
  <div class="chart-container">
    <div ref="chartRef" class="chart"></div>
  </div>
</template>

<style scoped>
/* 整合样式：保留第一个组件的卡片式设计 + 第二个组件的自适应高度 */
.chart-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  /* 响应式内边距 */
  @media (max-width: 768px) {
    padding: 10px;
  }
}

.chart {
  width: 100%;
  height: 100%;
  min-height: 300px; /* 保留最小高度，避免内容过少时坍塌 */
  /* 响应式高度：大屏固定高度，小屏自适应 */
  @media (min-width: 768px) {
    height: 550px;
  }
  @media (max-width: 767px) {
    height: 400px;
  }
}
</style>